<template>
    <div class="map" ref="map">

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const map = ref()
// 引入中国地图的数据
import chinaJson from './china.json'
// 注册中国地图
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
    const myChart = echarts.init(map.value)
    // 设置配置项
    myChart.setOption({
        // 地图组件
        geo: {
            map: 'china',//中国地图
            roam: true,//鼠标缩放和平移
            // 地图位置的调整
            left: 160,
            top: 130,
            zoom: 1.3,
            label: {
                show: true,
                fontSize: 13,
            },
            // 每一个多边形的样式
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'blue' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'yellow' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                opacity: 0.6,

            },
            emphasis: {
                itemStyle: {
                    color: '#7f7f7f',
                    opacity: 1
                }
            }
        },
        series: [{
            type: 'lines',
            data: [
                {
                    coords: [
                        [116.407395, 39.904211],
                        [119.00, 25.904211]
                    ],
                    // 统一的样式设置
                    lineStyle: {
                        width: 5,
                        color: 'orange'
                    }
                }
            ],
            effect: {
                show: true,
                period: 4,
                trailLength: 0.4,
                color: 'red',
                symbolSize: 30,
                symbol: 'arrow'
            }
        }
        ]
    })
})
</script>

<style scoped>
.map {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}
</style>